import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { fieldFlowExport, onCloseModalCommon } from '@/utils';
import { Ref, useRef } from 'react';
import { manageExportEnterService } from '../services';
import moment from 'moment';
import { Col, Form, Row, DatePicker } from 'antd';
import { TagSelectNew as TagSelect } from '@/components/TagSelectNew';
import pageStyles from '@/common/pageLayout.less';
import { ApplyManageTab } from '../mconfig';
const { RangePicker }: any = DatePicker;

const ExportModals = ({ curRes, onClose, reqParams }) => {
  /** 弹框的ref */
  const modalRef: Ref<IOneModalRef> = useRef(null);

  /** 搜索表单form */
  const [searchForm] = Form.useForm();

  /** 导出专家接口 */
  const { ExportEnterRun, ExportEnterLoading } = manageExportEnterService();

  /** 弹窗关闭方法 */
  const onCloseModal = () => {
    onClose();
  };

  /** 弹窗确认方法 */
  const onOkModal = async () => {
    /**
     * XX年XX月资产入库明细表
     * XX年XX月材料入库明细表
     * */

    // onCloseModalCommon(modalRef);
    // let reqBody: Record<string, any> = { ...reqParams };
    // const fileObj = await ExportEnterRun({ ...reqBody });
    // if (!fileObj?.status) {
    //     fieldFlowExport(fileObj, `物资信息${moment()?.format('YYYYMMDDHHmmss')}.xlsx`);
    //     onCloseModalCommon(modalRef);
    // }

    searchForm?.validateFields()?.then(async (values) => {
      let reqBody = {
        ...values,
        checkTimeStart: moment(values?.checkTime[0])?.format('YYYY-MM-DD HH:mm:ss'),
        checkTimeEnd: moment(values?.checkTime[1])?.format('YYYY-MM-DD HH:mm:ss'),
        ...ApplyManageTab(curRes),
      };

      delete reqBody?.['checkTime'];

      let strYear = moment(values?.checkTime[0])?.year();
      let strMonth = moment(values?.checkTime[0])?.month() + 1;

      let fileName = reqBody?.materialType == 0 ? `${strYear}年${strMonth}月材料入库明细表.xlsx` : `${strYear}年${strMonth}月资产入库明细表.xlsx`;

      const fileObj = await ExportEnterRun({ ...reqBody });

      if (!fileObj?.status) {
        fieldFlowExport(fileObj, fileName);
        onCloseModalCommon(modalRef);
      }
    });
  };

  return (
    <OneModal
      open={true}
      getContainer={false}
      ref={modalRef}
      title={'导出资产或材料'}
      onCancel={onCloseModal}
      onOk={onOkModal}
      width={document.body.clientWidth * 0.3}
      // bodyStyle={{ padding: '20px 40px' }}
      confirmLoading={ExportEnterLoading}
    >
      <div className={pageStyles['fromView-styles']}>
        <Form form={searchForm}>
          <Row gutter={[8, 8]}>
            {/* <Col span={24}> */}
            {/* <Form.Item label={'入库类型'} name={'materialType'}> */}
            <TagSelect
              colSpan={24}
              formLabel={'入库类型'}
              formName={'materialType'}
              defalultKeys={0}
              radioList={[
                {
                  value: 0,
                  name: '材料入库',
                },
                {
                  value: 1,
                  name: '资产入库',
                },
              ]}
            />
            {/* </Form.Item> */}
            {/* </Col> */}
            <Col span={24}>
              <Form.Item
                label="业务办结时间"
                name="checkTime"
                rules={[
                  {
                    required: true,
                    message: '请选择业务办结时间',
                  },
                ]}
              >
                <RangePicker
                  style={{ width: '100%' }}
                  format="YYYY-MM-DD"
                  placeholder={['开始日期', '结束日期']}
                  ranges={{
                    今天: [moment(), moment()],
                    本周: [moment().startOf('week'), moment().endOf('week')],
                    本月: [moment().startOf('month'), moment().endOf('month')],
                    本年: [moment().startOf('year'), moment().endOf('year')],
                  }}
                />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </div>
    </OneModal>
  );
};

export { ExportModals };
